<template>
  <div>
    <div class="fileQuery-query">
      <el-form :model="form" ref="form" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="菜单名称:">
              <el-input
                v-model="form.modulesName"
                placeholder="请输入菜单名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态:" label-width="100px">
              <el-select
                v-model="form.status"
                placeholder="请选择状态"
                style="width: 100%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in statusList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="菜单类型:" label-width="100px">
              <el-select
                v-model="form.modulesType"
                placeholder="请选择菜单类型"
                style="width: 100%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in typeList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left: 28px">
            <span class="search"
              ><el-button size="medium" @click="query">查 询</el-button></span
            >
            <span
              ><el-button size="medium" plain @click="reset"
                >重 置</el-button
              ></span
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="margin-bottom: 12px">
      <el-button size="medium" type="primary" @click="addData">新 增</el-button>
      <el-button size="medium" type="danger" @click="bathDelete"
        >批量删除</el-button
      >
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        @selection-change="handleSelectionChange"
        row-key="pageId"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :header-cell-style="{
          background: '#F5F7FA',
          color: '#303133',
        }"
      >
        <el-table-column type="selection" width="55" :reserve-selection="true">
        </el-table-column>
        <el-table-column label="序号" type="index" width="55">
        </el-table-column>
        <el-table-column label="菜单类型" width="auto">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.ModulesType == 1">菜单</el-tag>
            <el-tag type="success" v-if="scope.row.ModulesType == 0"
              >目录</el-tag
            >
            <el-tag type="warning" v-if="scope.row.ModulesType == 2"
              >按钮</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="ModulesName" label="名称" width="auto">
        </el-table-column>
        <el-table-column prop="RequestMethod" label="请求方式" width="auto">
          <template slot-scope="scope">
            <el-tag  v-if="scope.row.RequestMethod == 'GET'">{{ scope.row.RequestMethod }}</el-tag>
            <el-tag type="success" v-if="scope.row.RequestMethod == 'POST'">{{ scope.row.RequestMethod }}</el-tag>
            <el-tag type="warning" v-if="scope.row.RequestMethod == 'PUT'">{{ scope.row.RequestMethod }}</el-tag>
            <el-tag type="danger" v-if="scope.row.RequestMethod == 'DELETE'">{{ scope.row.RequestMethod }}</el-tag>
            
          
          </template>
        </el-table-column>
        <el-table-column prop="LinkUrl" label="链接地址" width="auto">
        </el-table-column>
        <el-table-column prop="PermissionCode" label="授权标识" width="auto">
        </el-table-column>
        <el-table-column prop="Controller" label="控制器名称" width="auto">
        </el-table-column>
        <el-table-column prop="Action" label="路由" width="auto">
        </el-table-column>
        <el-table-column label="状态" width="auto">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.Status == 1">启用</el-tag>
            <el-tag type="danger" v-if="scope.row.Status == 0">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Description" label="描述" width="auto">
        </el-table-column>
        <el-table-column prop="CreateByName" label="创建人" width="auto">
        </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间" width="auto">
        </el-table-column>
        <el-table-column prop="UpdateByName" label="更新人" width="auto">
        </el-table-column>
        <el-table-column prop="UpdateTime" label="更新时间" width="auto">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="auto">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detailsMenu(scope.row)">
              <span style="color: #4965d2">详情</span></el-button
            >

            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="delMenu(scope.row)"
              style="padding-left: 12px"
            >
              <el-button type="text" size="small" slot="reference">
                <span style="color: #e0433f">删除</span></el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="pagerList.total"
          :page-size="pagerList.intPageSize"
          :current-page="pagerList.page"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>
    <addMenu ref="addMenu" @getData="getData" />
    <detailsMenu ref="detailsMenu" @getData="getData" />
  </div>
</template>

<script>
import {
  AccessModules_GetTreeTable,
  AccessModules_delete,
  AccessModules_BathDelete,
} from "@/api/business";
import addMenu from "./addMenu";
import detailsMenu from "./detailsMenu";
export default {
  name: "VueXuAdminMenu",
  components: {
    addMenu,
    detailsMenu,
  },
  data() {
    return {
      form: { modulesName: "", modulesType: "", status: "", managementId: "" },
      ids: [],
      statusList: [
        {
          value: "1",
          label: "启用",
        },
        {
          value: "0",
          label: "禁用",
        },
      ],
      typeList: [
        {
          value: "0",
          label: "目录",
        },
        {
          value: "1",
          label: "菜单",
        },
        {
          value: "2",
          label: "按钮",
        },
      ],
      pagerList: {
        intPageSize: 10,
        page: 1,
        total: 0,
      },

      tableData: [],
    };
  },

  mounted() {
    this.getTableData();
  },

  methods: {
    addData() {
      this.$refs.addMenu.show();
    },
    detailsMenu(data) {
      this.$refs.detailsMenu.show(data);
    },
    async delMenu(data) {
      let res = await AccessModules_delete(data.Id);
      if (res.data.status == 200) {
        this.getTableData();
        this.$message({
          type: "success",
          message: "删除成功",
        });
      }
    },
    bathDelete() {
      if (this.ids.length == 0) {
        this.$message({
          type: "error",
          message: "至少选择一条数据!",
        });
        return;
      }
      this.$confirm("确定要批量删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await AccessModules_BathDelete(this.ids);
          if (res.data.status == 200) {
            this.getTableData();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(data) {
      console.log(data);
      data.forEach((element) => {
        this.ids.push(element.Id);
      });
    },
    getData() {
      this.getTableData();
    },
    currentChange(page) {
      this.pagerList.page = page;
      this.getTableData();
    },
    query() {
      this.getTableData();
    },
    reset() {
      this.form = {
        modulesName: "",
        modulesType: "",
        status: "",
        managementId: "",
      };
      this.pagerList = {
        intPageSize: 10,
        page: 1,
        total: 0,
      };
      this.getTableData();
    },
    async getTableData() {
      this.form.managementId = JSON.parse(
        localStorage.getItem("xmGlDetails")
      ).Id;
      let value = Object.assign(this.form, this.pagerList);
      let res = await AccessModules_GetTreeTable(value);
      console.log(res, "菜单信息列表");
      this.tableData = res.data.response.data;
      this.pagerList.total = res.data.response.dataCount;
    },
  },
};
</script>

<style  scoped>
.search .el-button {
  background-color: #4965d2;
  color: #fff;
  border-color: #4965d2;
}

.pagination {
  float: right;
  margin: 24px 0px;
}
</style>
